<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户借阅情况</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background: #f7f7f7;
        }
        .container {
            width: 90%;
            max-width: 1000px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            text-align: left;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f4f4f4;
        }
        td {
            vertical-align: top; /* 调整行内元素垂直对齐 */
        }
        /* 为操作列的链接添加样式 */
        .action-link {
            color: #0066cc;
            text-decoration: none;
        }
        .action-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<h1>用户借阅情况</h1>
<table id="userBorrowRecordsTable">
    <thead>
    <tr>
        <th>图书名</th>
        <th>图书类别</th>
        <th>作者</th>
        <th>借阅日期</th>
        <th>还书日期</th>
    </tr>
    </thead>
    <tbody>
    <!-- 用户借阅记录将通过AJAX动态插入这里 -->
    </tbody>
</table>

<script>
    // 假设从URL获取userId
    var urlParams = new URLSearchParams(window.location.search);
    var userId = urlParams.get('id');
    $(document).ready(function() {
        $.ajax({
            url: '/api/v1/users/' + userId + '/borrow-records/list',
            method: 'GET',
            contentType: 'application/json',
            success: function(data) {
                var records = data;
                var tbody = $('#userBorrowRecordsTable tbody');
                records.forEach(function(record) {
                    tbody.append(
                        '<tr>' +
                        '<td>' + record.bookName + '</td>' +
                        '<td>' + record.category + '</td>' +
                        '<td>' + record.author + '</td>' +
                        '<td>' + record.borrowDate + '</td>' +
                        '<td>' + (record.returnDate || '未还') + '</td>' +
                        '</tr>'
                    );
                });
            },
            error: function(xhr, status, error) {
                console.error('获取用户借阅记录失败:', error);
            }
        });
    });
</script>
</body>
</html>